Storybook Opener
https://raw.githubusercontent.com/ygkn/storybook-opener/main/assets/icon.svg
一発でエディタで開いているファイルの Storybook を開ける VS Code 拡張機能
モチベーション
よ〜しこのコンポーネント実装しちゃうぞ〜
コンポーネントと Stories のファイルを作って〜
Storybook を開いて〜
あのコンポーネントの Story はどこかな〜 ﾎﾟﾁ……ﾎﾟﾁ…… よし、あった！
（実装中…）
よし、できた！
お、新しいプルリクがあるな、レビューしよう。チェックアウトして〜
レビューするコンポーネントの Story はどこかな〜 ﾎﾟﾁ…ﾎﾟﾁ…
うん、動いてるしコードも問題なさそう
もう一個実装してくれたコンポーネントがあるのか、 Story を開いて〜 ﾎﾟﾁ…ﾎﾟﾁ…
ヨシ！ LGTM！
次はこのコンポーネントを実装するか
コンポーネントと Stories のファイルを作って〜
また Storybook をﾎﾟﾁﾎﾟﾁして Story を開かなきゃ…
あ、さっき Storybook 落としてたんだった！ VS Code に戻って起動しなきゃ…
うわっ VS Code の Quick Open のショートカットキー押したら印刷ダイアログが出てきた
ムキー！
きっかけ
使い方
開発時に得た知見
なぜしんどいか
VS Code と Storybook を両方操作しなければいけない
Story がどこにあるか探さなければいけない
title があるか？
ある：title を確認
ない：ファイルのパスを確認
上記のことをコンポーネント毎に行う必要がある
レビュー、実装時はすでにコンポーネントや Story のファイルを開いている
-> 開いているエディタから Storybook が開ければ便利なのでは？
使い方
以下開発メモ
Storybook の config を読まなければ始まらない
titlePrefix などの設定値によって開くべき URL が変わる
Stories ファイルを読まなければいけない
title によって URL が変わる
そもそも見るべきファイルが stories で変わる
React 以外でもいけるのか？
Vue, Svelte, Solid, 生 HTML
Tailwind を見る
Storybook を読む
v1.0
settings 対応
docs
使ってみて追加した機能
Storybook が起動してなかったら起動する
コロケーションしているファイルに対応
いい感じのタイミングでブラウザを開く
いい感じのタイミング？
Command Palette から実行したとき
すでに開いている場合はどうする？
http://localhost:${port}/?path=/story/${id} をひらけば良さそう
port
無理では…？
とりま 6006
option から取るくらいはしてもいいかもしれない
SBCONFIG_PORT
id
id - the story "id" (in the URL)
@storybook/preview-api から import したファイルで processCSFFile を呼べば良い
どうやって import するねん
依存ライブラリとか import alias とか解決できひんやん